<template>
	<view class="search_content">
		<view class="search_bar">
			<view class="input-row">
				<text class="iconfont_icon">&#xe6c8;</text>
				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="Search..."></m-input>
			</view>
		</view>
		<view v-if="!!searchList.length" class="search_box">
			<view class="s_list">
				<view class="s_item" v-for="(item, index) in searchList" v-if="item.guardianName.indexOf(account) != -1" :key="index" @tap="searchItem(item.problemResultId)">
					<image style="width: 50px; height: 50px;" :src="!!item.stuPhotoPath ? utils.localURL + '/' + item.stuPhotoPath : txImg"></image>
					<view style="margin-left: 15px;"> 
						<view class="item_up">
							<text>Guardian：{{item.guardianName}}</text>
							<text>{{item.createTime}}</text>
						</view>
						<view class="item_down">Student：{{item.stuName}}</view>
					</view>
					<text class="iconfont_icon">&#xe630;</text>
				</view>
			</view>
		</view>
		<view v-else class="nothing">
			<image src="../../static/img/nothing.png"></image>
		</view>
	</view>
</template>

<script>
	import mInput from '../../components/m-input.vue';
	import api from '../../api/recordApi.js'
	import otherApi from '../../api/otherApi.js'
	import utils from '../../api/utils.js'
	import txImg from '../../static/img/avatarImg.jpeg';
	
	export default {
		data() {
			return {
				iconType: 'success',
				account: '',
				tabIndex: 0,
				searchList: [],
				txImg: txImg,
				utils: utils
			}
		},
		components: {
			mInput
		},
		methods: {
			// createRecord() {
			// 	uni.navigateTo({
			// 		url: "../record/interviewRecord"
			// 	})
			// },
			searchItem(id) {
				uni.navigateTo({
					url: `./searchItem?problemResultId=${id}`
				})
			}
		},
		async onShow() {
			let _this = this
			let token = ''
			uni.getStorage({
				key: 'token',
				success(res) {
					token = res.data
				}
			})
			if (utils.userType == '学生' && utils.platform == 'android') {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					async success(res) {
						let Position = {};
						Position = {
							address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
								/undefined/g,
								''
							),
							latitude: res.latitude,
							longitude: res.longitude
						};
						let savePosition = await otherApi.savePosition('position/savePosition', Position, token);
					}
				});
				setInterval(async () => {
					let Position = {};
					uni.getLocation({
						type: 'wgs84',
						geocode: true,
						async success(res) {
							let Position = {};
							Position = {
								address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
									/undefined/g,
									''
								),
								latitude: res.latitude,
								longitude: res.longitude
							};
							await otherApi.savePosition('position/savePosition', Position, token);
						}
					});
				}, 900000);
			}
			
			uni.showLoading({
				title: 'Please wait...',
				mask: true
			})
			let data = await api.getInterviewsList('problemresult/getGruSysProblemResultList', {
				current: 1,
				size: 100,
				interviewStatus: '0'
			},token)
			if (data.head.status) {
				_this.searchList = data.body
			} else {
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
			uni.hideLoading()
		}
	}
</script>

<style scoped>
	.search_content {
		width: 100%;
		background-color: #f1f1f1;
		box-sizing: border-box;
		padding-bottom: 55px;
	}
	
	.search_bar {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.input-row {
		width: 100%;
		border: solid 1px #ccc;
		height: 35px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 10px;
		padding: 0 5px;
		box-sizing: border-box;
	}
	
	.s_list {
		background-color: #fff;
		margin-top: 5px;
	}
	
	.s_item {
		padding: 15px;
		border-bottom: solid 1px #eee;
		font-size: 16px;
		color: #555;
		position: relative;
		display: flex;
		align-items: center;
	}
	
	.item_up {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	
	.item_up > text:last-child {
		font-size: 14px;
		color: #777;
		padding-right: 15px;
	}
	
	.s_item .iconfont_icon {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 20px;
		height: 20px;
		color: #0599D7;
	}
	
	.add_btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.nothing {
		width: 100%;
		text-align: center;
	}
	
	.nothing image {
		width: 150px;
		height: 150px;
		margin-top: 50%;
	}
</style>
